import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import avatar from '../assets/back.jpg'
import { getNewsList } from '../store/action/news'
export default function NewsList() {
  const dispatch = useDispatch()
  // active => 频道 id
  // 获取数据
  const {
    channel: { active },
    news: { list },
  } = useSelector((state) => state)
  useEffect(() => {
    // 发起请求
    dispatch(getNewsList(active))
  }, [dispatch, active])
  return (
    <div className='list'>
      {list.map((item) => (
        <div className='article_item' key={item.art_id}>
          <h3 className='van-ellipsis'>{item.title}</h3>
          <div className='img_box'>
            <img
              src={item.cover.type === 0 ? avatar : item.cover.images[0]}
              className='w100'
              alt=''
            />
          </div>
          <div className='info_box'>
            <span>{item.aut_name}</span>
            <span>{item.comm_count}评论</span>
            <span>{item.pubdate}</span>
          </div>
        </div>
      ))}
    </div>
  )
}
